<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> 
<link rel="stylesheet" href= "../css/pagination.css">
<style>
.cardBox {
		width: 230px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		text-align: center;
		float: left;
		padding: 12px;
		margin:15px;
		height:225px;
		font-size:10px;
		border-radius:8px;
	}

	.headerBox {
		color: #fff;
		padding: 10px;
		font-size: 12px;
		height: 80px;
		border-radius:8px;
	}

	.bodyBox {
		padding: 3px;
	}

	.bodyBox p {
		margin-left: 5px;
	}
</style>
</head>
<body>
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<div style="border:0px solid red;width:100%;height:510px;float:left;overflow:auto;" id="listpost">
	
</div>
<div style="border:0px solid red;width:100%;height:20px;float:left;">
<div class="row">
		<div class="col-md-12">
			<!-- 分页控件 -->
			<div id="page" align="center"></div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../js/jquery.pagination.js"></script>
<script>
$(function(){
	ajax();
	function ajax(){
		$.ajax({
			url:'../list_posts?pageNum=1&pageSize=6',
			method:'get',
			success:function(result){
				listPosts(result);
				page(result);
			}
		})
	}
});
	
//分页
function page(result){
	$('#page').pagination(result.total, {
		//第一个参数指定共多少条记录
  	       items_per_page : result.pageSize, // 每页显示多少条记录
  	       next_text : '>', //下一页按钮图标
  	       prev_text : '<', //上一页按钮图标
  	       num_display_entries : 5,//主体页数
  	       num_edge_entries : 2, //边缘页数
  	       callback : function(pageNum){//定义一个回调函数，用于每次点击页码发起分页查询请求
  	    	   		pageNum = ++pageNum;
  	    	   		$.ajax({
  	 					url: '../list_posts?pageNum='+pageNum+'&pageSize='+result.pageSize,
  	 					method: 'get',
  	 					success: function(results){
  	 						listPosts(results);
  	 					}
  	 				});
  	       }	   
  	});
}

	function listPosts(result){
		$('#listpost').empty();
		$.each(result.list,function(index,obj){
			$('#listpost').append(
					'<div class="cardBox">'+
					'<div class="headerBox" style="background-color: #FF7701;">'+
					'<p>'+					
					'<a title="查看详情" style="cursor: pointer; color:white" target="_blank" href="../view_posts?pid='+obj.p_id+'&account='+obj.p_account+'">'+obj.p_theme+'</a><br>'+
					'<div style="width:100%;height:1px;float:left;"></div>'+
					'<span>'+'浏览量：'+obj.p_view+'</span>'+
					'</p>'+
					'</div>'+
					'<div style="width:100%;height:1px;float:left;"></div>'+
					'<div class="bodyBox">'+
					'<br/>'+
					'<p>发 帖 人：'+'<a href="'+obj.p_account+'">'+obj.p_account+'</a>'+'</p>'+
					'<p>帖子ID：'+obj.p_id+'</p>'+
					'<p>所属板块：'+'<a href="#">'+obj.p_plate+'</a>'+'</p>'+
					'<p>发帖时间：'+obj.p_time+'</p>'+
					'</div>'+
					'</div>'
					);
		});
	}
</script>
</html>